<template>
  <view class="wh_750 flex flex-column align-center pageHeight bg_F5F5F5">
    <s-header-title isDisplayBack
                    title="请选择"
                    isFixed
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:page.headerHeight+'px'}"></view>
    <view class="wh_710 bg_FFFFFF mt_20"
          style="border:2rpx solid #E5E5E5;border-radius: 8rpx;"
    >
      <view class="ml_20 mr_20 wh_670">
        <view class="wh_670 fs_24 color_4B4B4B fw_500" style="padding: 15rpx 0 15rpx 0">请选择</view>
        <uni-collapse class="collapse"
                      accordion
                      @change="collapseChange($event)"
        >
          <view v-for="(item,index) in page.familyList" :key="index"
                class="mt_20"
          >
            <uni-collapse-item :class="page.activateTheFoldingPanel == index ? 'collapseItems' : 'collapseItem'"
                               title-border="none"
                               show-animation
                               :open="index == 0"
            >
              <template #title>
                <view class="item_header flex flex-row align-center">
                  <view class="right" style="margin-left: 22rpx;">
                    <view class="name">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
              </template>
              <view class="flex flex-wrap align-center">
                <view class="flex align-center justify-center mt_20 ml_20"
                      v-for="(item1,index1) in item.members" :key="index1"
                      style="border-radius: 33rpx;padding: 10rpx 15rpx;"
                      :style="{
                        background: item1.id === page.currentUser.id ? '#6EA0FC' : '#FFFFFF',
                        border: item1.id === page.currentUser.id ? '2rpx solid transparent' : '2rpx solid #DEDEDE',
                        color: item1.id === page.currentUser.id ? '#FFFFFF' : '#4B4B4B'
                      }"
                      @click.stop="selectUser(item1)"
                >
                  <s-avatar :width="36" :height="36"
                            :src="item1.avatar.indexOf('http') != -1 ? item1.avatar : `${nc_image}${item1.avatar}`"
                  ></s-avatar>
                  <view class="fs_32 fw_500 ml_11" v-if="!!item1.surname || !!item1.daimyo">
                    {{ item1.surname }}{{ item1.daimyo }}
                  </view>
                  <view classs="fs_32 fw_500 ml_11" v-else>
                    {{ item1.remark }}
                  </view>
                </view>
              </view>
            </uni-collapse-item>
          </view>
        </uni-collapse>
      </view>
      <view class="hW_20"></view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import SAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    familyList: [],
    activateTheFoldingPanel: 0,
    // 当前选择的用户信息
    currentUser: {},
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  onLoad(() => {
    // 获取所有家庭成员
    getFamilyMember();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getFamilyMember() {
    const { data } = await sheep.$api.user.getFamilyMember();
    page.familyList = data;
  }

  function collapseChange(e) {
    console.log('折叠面板状态改变=>', e);
    page.activateTheFoldingPanel = !!e ? e : -1;
  }

  function selectUser(info) {
    page.currentUser = info;
    uni.$emit('selectUser', info);
    uni.navigateBack();
  }
</script>


<style scoped lang="scss">
  .collapse {
    ::v-deep .uni-collapse {
      background: transparent !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    /* #endif */
  }

  .collapseItem {
    width: 670rpx;

    ::v-deep .uni-collapse {
      background: transparent;
    }

    ::v-deep .uni-collapse-item {
      width: 100%;
    }

    ::v-deep .uni-collapse-item__title {
      background: #FFEAEA;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    ::v-deep .uni-collapse-item__wrap {
      background-color: #FFFFFF !important;
    }

    ::v-deep .uni-collapse-item__title-arrow {
      transform: rotate(-90deg) !important;
    }

    ::v-deep .uni-collapse-item__wrap-content {
      border-bottom-color: #FFFFFF !important;
      border-bottom-width: 0 !important;
    }

    ::v-deep .uni-collapse-item__title-arrow-active {
      transform: rotate(0deg) !important;
    }

    ::v-deep .uni-icons {
      display: none;
      color: #000000 !important;
      font-size: 34rpx !important;
    }

    .item_header {
      padding: 12rpx 0 12rpx 23rpx;
      height: 80rpx;

      image {
        width: 60rpx;
        height: 60rpx;
      }

      .right {
        .name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
        }

        .code {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 24rpx;
          color: #9F9F9F;
        }
      }
    }

    .items_content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 0 18rpx;

      .list {
        width: 666rpx;
        padding: 18rpx 0;

        .left {
          image {
            width: 58rpx;
            height: 58rpx;
          }

          .top {
            .name {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 500;
              font-size: 30rpx;
              color: #000000;
            }

            .background_AI {
              width: 66rpx;
              height: 30rpx;
              background: url($uni-bg-url + '/chat_icon_ai.png') no-repeat;
              background-size: 66rpx 30rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }

          .bottom {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 20rpx;
            color: #9F9F9F;
          }
        }

        .right {
          image {
            width: 55rpx;
            height: 55rpx;
          }
        }
      }
    }
  }

  .collapseItems {
    width: 670rpx;

    ::v-deep .uni-collapse {
      background: transparent;
    }

    ::v-deep .uni-collapse-item {
      width: 100%;
    }

    ::v-deep .uni-collapse-item__title {
      background: #ff4206;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    ::v-deep .uni-collapse-item__wrap {
      background-color: #FFFFFF !important;
    }

    ::v-deep .uni-collapse-item__title-arrow {
      transform: rotate(-90deg) !important;
    }

    ::v-deep .uni-collapse-item__wrap-content {
      border-bottom-color: #FFFFFF !important;
      border-bottom-width: 0 !important;
    }

    ::v-deep .uni-collapse-item__title-arrow-active {
      transform: rotate(0deg) !important;
    }

    ::v-deep .uni-icons {
      display: none !important;
      color: #000000 !important;
      font-size: 34rpx !important;
    }

    .item_header {
      padding: 12rpx 0 12rpx 23rpx;
      height: 80rpx;

      image {
        width: 60rpx;
        height: 60rpx;
      }

      .right {
        .name {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 30rpx;
          color: #FFFFFF;
        }

        .code {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 24rpx;
          color: #9F9F9F;
        }
      }
    }

    .items_content {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      padding: 0 18rpx;

      .list {
        width: 666rpx;
        padding: 18rpx 0;

        .left {
          image {
            width: 58rpx;
            height: 58rpx;
          }

          .top {
            .name {
              font-family: Source Han Sans CN, Source Han Sans CN;
              font-weight: 500;
              font-size: 30rpx;
              color: #FFFFFF;
            }

            .background_AI {
              width: 66rpx;
              height: 30rpx;
              background: url($uni-bg-url + '/chat_icon_ai.png') no-repeat;
              background-size: 66rpx 30rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }

          .bottom {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 20rpx;
            color: #9F9F9F;
          }
        }

        .right {
          image {
            width: 55rpx;
            height: 55rpx;
          }
        }
      }
    }
  }
</style>
